<template>
  <div class="singer-class">
    <nav-bar class="nav-bar">
      <div slot="left" class="left">
        <img src="../../assets/img/common/back.svg" alt="" @click="back">
      </div>
      <div slot="center" class="center">
        <p>歌手分类</p>
      </div>
    </nav-bar>

    <div class="choosebox">
      <router-link to="/singerClass/chinese" @click.native="choosechinese">华语</router-link>
      <router-link to="/singerClass/europe" @click.native="chooseeurope">欧美</router-link>
      <router-link to="/singerClass/japanese" @click.native="choosejapanese">日本</router-link>
      <router-link to="/singerClass/korea" @click.native="choosekorea">韩国</router-link>
      <router-link to="/singerClass/others" @click.native="chooseothers">其他</router-link>
      <br>
      <a @click="gotoMale" :class="{choose:show[0]}">男</a>
      <a @click="gotoFemale" :class="{choose:show[1]}">女</a>
      <a @click="gotoOthers" :class="{choose:show[2]}">其他</a>
    </div>

    <div class="font">
      <p>热门歌手</p>
    </div>

    <class-list></class-list>
    <router-view></router-view>

  </div>
</template>

<script>
  import NavBar from "../../components/common/navbar/NavBar";
  import ClassList from "./ChildSingerClass/ClassList";
  import {getSingerClass,getCategory} from "../../network/singerClass";
  export default {
        name: "SingerClass",
        components:{
            NavBar,
            ClassList,
        },
        data(){
          return{
              show:[true,false,false],
              data:[],
          }
        },
      created() {
        getSingerClass().then(res=>{
            this.data = res.data.artists
            this.$store.commit('singerClass',this.data)
        })

      },
      methods:{
          back(){
            this.$router.push('/search');
          },
          gotoMale(){
              this.show[0]=true
              this.show[1]=false
              this.show[2]=false
              if(this.$route.path.includes('chinese')){  //华语--男
                  getCategory(1,7).then(res=>{
                      console.log(res.data.artists)
                      this.$store.commit('singerClass',res.data.artists)
                  })
                  this.$router.push('/singerClass/chinese/male')
              }else if(this.$route.path.includes('europe')){  //欧美--男
                  getCategory(1,96).then(res=>{
                      console.log(res.data.artists)
                      this.$store.commit('singerClass',res.data.artists)
                  })
                  this.$router.push('/singerClass/europe/male')
              }else if(this.$route.path.includes('japanese')){  //日本--男
                  getCategory(1,8).then(res=>{
                      console.log(res.data.artists)
                      this.$store.commit('singerClass',res.data.artists)
                  })
                  this.$router.push('/singerClass/japanese/male')
              }else if(this.$route.path.includes('korea')){  //韩国--男
                  getCategory(1,16).then(res=>{
                      console.log(res.data.artists)
                      this.$store.commit('singerClass',res.data.artists)
                  })
                  this.$router.push('/singerClass/korea/male')
              }else if(this.$route.path.includes('others')){  //其他--男
                  getCategory(1,0).then(res=>{
                      console.log(res.data.artists)
                      this.$store.commit('singerClass',res.data.artists)
                  })
                  this.$router.push('/singerClass/others/male')
              }
          },
          gotoFemale(){
              this.show[0] = false
              this.show[1] = true
              this.show[2] = false
              if(this.$route.path.includes('chinese')){  //华语--女
                  getCategory(2,7).then(res=>{
                      console.log(res.data.artists)
                      this.$store.commit('singerClass',res.data.artists)
                  })
                  this.$router.push('/singerClass/chinese/female')
              }else if(this.$route.path.includes('europe')){  //欧美--女
                  getCategory(2,96).then(res=>{
                      console.log(res.data.artists)
                      this.$store.commit('singerClass',res.data.artists)
                  })
                  this.$router.push('/singerClass/europe/female')
              }else if(this.$route.path.includes('japanese')){  //日本--女
                  getCategory(2,8).then(res=>{
                      console.log(res.data.artists)
                      this.$store.commit('singerClass',res.data.artists)
                  })
                  this.$router.push('/singerClass/japanese/female')
              }else if(this.$route.path.includes('korea')){  //韩国--女
                  getCategory(2,16).then(res=>{
                      console.log(res.data.artists)
                      this.$store.commit('singerClass',res.data.artists)
                  })
                  this.$router.push('/singerClass/korea/female')
              }else if(this.$route.path.includes('others')){  //其他--女
                  getCategory(2,0).then(res=>{
                      console.log(res.data.artists)
                      this.$store.commit('singerClass',res.data.artists)
                  })
                  this.$router.push('/singerClass/others/female')
              }
          },
          gotoOthers(){
              this.show[0] = false
              this.show[1] = false
              this.show[2] = true
              if(this.$route.path.includes('chinese')){  //华语--其他
                  getCategory(3,7).then(res=>{
                      console.log(res.data.artists)
                      this.$store.commit('singerClass',res.data.artists)
                  })
                  this.$router.push('/singerClass/chinese/others')
              }else if(this.$route.path.includes('europe')){  //欧美--其他
                  getCategory(3,96).then(res=>{
                      console.log(res.data.artists)
                      this.$store.commit('singerClass',res.data.artists)
                  })
                  this.$router.push('/singerClass/europe/others')
              }else if(this.$route.path.includes('japanese')){  //日本--其他
                  getCategory(3,8).then(res=>{
                      console.log(res.data.artists)
                      this.$store.commit('singerClass',res.data.artists)
                  })
                  this.$router.push('/singerClass/japanese/others')
              }else if(this.$route.path.includes('korea')){  //韩国--其他
                  getCategory(3,16).then(res=>{
                      console.log(res.data.artists)
                      this.$store.commit('singerClass',res.data.artists)
                  })
                  this.$router.push('/singerClass/korea/others')
              }else if(this.$route.path.includes('others')){  //其他--其他
                  getCategory(3,0).then(res=>{
                      console.log(res.data.artists)
                      this.$store.commit('singerClass',res.data.artists)
                  })
                  this.$router.push('/singerClass/others/others')
              }
          },
          choosechinese(){
              this.gotoMale()
          },
          chooseeurope(){
              this.gotoMale()
          },
          choosejapanese(){
              this.gotoMale()
          },
          choosekorea(){
              this.gotoMale()
          },
          chooseothers(){
              this.gotoMale()
          },
        }
    }
</script>

<style scoped>
  .singer-class{
    width: 100%;
    position: relative;
  }

  .nav-bar{
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 10;
    background-color: white;
  }

  .left{
    width: 100%;
  }

  .left img{
    width: 25px;
    height: 25px;
    vertical-align: middle;
  }

  .center{
    height: 44px;
    width: 100%;
    position: relative;
  }

  .center p{
    position: absolute;
    left: 0;
  }

  .choose{
    color: crimson;
    font-weight: 800;
  }

  .router-link-active{
    color: crimson;
    font-weight: 800;
  }

  .choosebox{
    font-size: 15px;
    padding-top: 44px;
    margin: 0 auto;
  }

  .choosebox a{
    display: inline-block;
    margin-left: 15px;
    margin-top: 15px;
    margin-right: 20px;
  }

  .font{
    margin-top: 20px;
    font-size: 15px;
    background-color: #DBDBDC;
    padding: 8px;
    padding-left: 10px;
  }

  .font p{

  }















</style>